<template>
  <div>
    <div>
      <Header></Header>
    </div>

    <div id="container">

      <div style="float: left">
        <img :src="cinema.pic"/>
      </div>

      <div>
        <div style="font-size: 26px;color: white;float: left;margin: 10px;">
          {{cinema.name}}
          <p style="margin-top: 20px;font-size: 14px">
            {{cinema.address}}
          </p>
          <p style="margin-top: 20px;font-size: 14px">
            电话：{{cinema.tel}}
          </p>
          <p style="margin-top: 20px;font-size: 14px">
            影院服务:<span></span>
          </p>
          <p style="margin-top: 20px;font-size: 14px;overflow: hidden">
              1.3以下儿童可免费无座观影（VIP厅、4D厅、IMAX厅除外），一名成人限带一名儿童，（仅限1.3以下，观看3D均有3D眼镜）
          </p>
        </div>
      </div>

      </div>


    <div style="margin-top: 50px;margin-left: 300px">
      <div>猫眼电影 > 影院 > {{cinema.name}}</div>
      <div>
        <h1 class="item-left"><span style="margin-top: 50px;font-size: 28px;color: black">今日热映：</span></h1>


          <div v-for="m in MoviesImg":key="m.filmId" style="width: 1500px;margin-top: 30px">


            <router-link :to="`/order/${m.filmId}/${m.filmName}`">
              <div>
                <img :src="m.cover" class="img"/>
                <div style="display: inline-block ;margin-left: 10px;margin-top: 10px">
                  <p style="font-size: 18px;color: #999999;">电影：<span style="font-size: 24px;color: #151515;line-height: 30px"> {{m.filmName}}</span><p/>
                  <p style="font-size: 18px;color: #999999;">类型：<span style="color: #151515;line-height: 30px"> {{m.type}}</span><p/>
                  <p style="font-size: 18px;color: #999999;">评分：<span style="color: #151515;line-height: 30px"> {{m.score}}</span><p/>
                  <p style="font-size: 18px;color: #999999;">想看数：<span class="wish"> {{m.wish+684}}人</span><p/>
                  <button style="height: 35px;font-size: 20px;background-color: red;border: #d5d5d5 solid 1px;margin-top: 10px;border-radius: 10px;color: #eaeaea">立即购票</button>
                </div>
              </div>
            </router-link>

          </div>
        </div>

      </div>
    </div>

</template>

<script>
  import Header from '../Header/Header'
  import axios from 'axios'
  export default {
    name: "cinemadetail",
    data(){
      return{
        cinema:{},
        MoviesImg:[]
      }
    },
    components:{
      Header
    },

    mounted(){

      /*请求后端电影院列表
      * 前端组件名：cinemalist.vue
      * 何财宇负责*/
      axios.get('/api/cinema/allCinemas')
        .then((resp)=>{
          this.cinema = resp.data
        },(error)=>{
          console.error(error);
        }),
/*请求某电影院里面有什么电影在放*/
        axios.get('/api/cinema/allFilms')
          .then((resp)=>{
            console.log("图集",resp)
            this.MoviesImg = resp.data
          },(error)=>{
            console.error(error);
          })

    },

  }
</script>

<style scoped>

  #container {
    margin-top: 10px;
    background: #392f59 no-repeat 50%;
    height: 300px;
  }
  .img{
    height: 240px;
    width: 160px;
    margin-left: auto;
    border: chocolate solid 3px;
  }

  p span{
    color: #151515;
  }
  .wish{
    font-size: 30px;color: #ffc600; height: 30px;line-height: 30px; font-style: italic;
  }
  .item-left{
    font-size: 18px;
    color: #333;
    border-left: 4px solid #f03d37;
    padding-left: 6px;
    line-height: 18px;
    margin-top: 50px;
    position: relative;
    font-weight: bolder;
  }
</style>
